<template>
    <div id="storeDetail">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!-- 粘性布局 -->
            <van-sticky>
                <!-- 导航栏 -->
                <van-nav-bar
                        title="门店详情"
                        left-arrow
                        @click-left="onClickLeft"
                />
            </van-sticky>
            <div>
            <van-row style="font-size: 14px;
                            padding-left: 15px;
padding-bottom: 15px;padding-top: 15px;background-color:#F7F7F7">
                <van-col span="7">
                    余额：<span style="color: red">￥{{ amount }}</span>
                </van-col>
                <van-col span="6">
                    积分：<span style="color: red">{{ credits }}</span>
                </van-col>
            </van-row>
            </div>
            <!--首页门店信息-->

                <div id="storeMsg" style="padding-top:10px;margin-bottom: 50px;margin-top: 1px">
                    <div
                        v-for="item in store"
                        @click="goStoreInfo(item.storeId,item.averageStar,item.storeDistance)"
                    ><van-card
                        :thumb="item.storeimage"
                        style="background-color: white"
                    >
                        <template #tags>
                            <!--门店名称-->
                            <van-cell class="storeName" style="font-weight: normal;font-size: 20px;color: black">{{ item.storeName }}</van-cell>
                            <!--门店星级-->
                            <div class="interval">
                                <van-rate
                                    color="rgb(255, 167, 56)"
                                    v-model="item.averageStar"
                                    size="18px"
                                    allow-half
                                    readonly
                                />
                                <!-- 门店距离 -->
                                <span class="distance">{{item.storeDistance}}km</span>
                            </div>
                            <div class="interval">
                                <van-tag  type="primary" size="medium"
                                >工位:&nbsp;&nbsp;{{ item.stationNumber }}</van-tag
                                >
                                &nbsp;
                                <van-tag  color="#00cc00" size="medium"
                                >空闲:&nbsp;&nbsp;{{ item.stationIdle }}</van-tag
                                >
                                &nbsp;
                                <van-tag color="#FFA500" size="medium" v-if="item.stationUsed!=0"
                                >使用中:&nbsp;&nbsp;{{ item.stationUsed}}</van-tag
                                >
                            </div>
                            <!-- 门店标签 -->
                            <div class="interval">
                                <van-tag
                                    class="keyword"
                                    v-for="(item1, index) in item.storeLabel"
                                    :key="index"
                                    :list="item1.storeLabel"
                                >{{ item1 }}</van-tag
                                >&nbsp;
                            </div>
                            <!-- 门店地址 -->
                            <van-cell class="address">
                                <van-icon name="location" color="skyblue" />
                                {{ item.address }}</van-cell
                            >
                        </template>
                    </van-card>
                    </div>
                </div>
        </van-pull-refresh>
    </div>
</template>
<script>
export default {
    setup() {
        const onClickLeft = () => history.back();
        return {
            onClickLeft,
        };
    },
    data() {
        return {
            isLoading: false, //刷新参数
            //选择的地址
            address: {
                storeName: '',
                province: "",
                city: "",
                rectangle: '',
                storeId: ''
            },
            key:'0dcc39554278850fe01e5439bd55cea1',
            amount: 0,//默认金额
            credits: 0,//默认积分
            store:[],
            currentLng: 113.665412, // 默认经度
            currentLat: 34.757975,  // 默认纬度
        }
    },
    async  created() {
        this.address.storeId = this.$route.query.storeId;
        this.amount = this.$route.query.amount;
        this.credits = this.$route.query.credits;
        console.log(this.address.storeId, "----", this.amount, "-------", this.credits)
        await this.getLocationInfo(); // 等待定位完成
        this.loadAllStore();          // 再加载数据
    },
    methods: {
        //刷新方法
        onRefresh() {
            setTimeout(() => {
                Toast("刷新成功");
                this.isLoading = false;
                //调用请求
            }, 1000);
        },
        //async 用于申明一个 function 是异步的，
        // 修改getLocationInfo方法
async getLocationInfo() {
    try {
        const response = await fetch(`https://restapi.amap.com/v3/ip?key=${this.key}`);
        const data = await response.json();
        
        if (data.status === '1' && data.rectangle) {
            // 解析矩形区域坐标（示例："113.23,23.12;113.25,23.14"）
            const [bottomLeft] = data.rectangle.split(';');
            const [lng, lat] = bottomLeft.split(',');
            
            // 更新坐标数据（确保转换为数字）
            this.currentLng = parseFloat(lng);
            this.currentLat = parseFloat(lat);
            
            // 触发数据加载
            this.loadAllStore();
        }
    } catch (error) {
        console.error("定位失败:", error);
        Toast("自动定位失败，使用默认位置");
        this.currentLng = 113.665412; // 郑州默认经度
        this.currentLat = 34.757975;  // 郑州默认纬度
        this.loadAllStore();
    }
},

        // 修改loadAllStore方法
        loadAllStore() {
    const params = {
        userLng: this.currentLng,
        userLat: this.currentLat
    };

    this.$http.get("/store/feign/selectStoreByUserId2", { params })
        .then(resp => {
            if (resp.data.code === 200 && resp.data.data) {
                this.store = resp.data.data.map(store => ({
                    ...store,
                    storeDistance: store.storeDistance ? 
                        Number((store.storeDistance / 1000).toFixed(2)) : 0,
                    // 新增标签处理逻辑
                    storeLabel: store.labelContent ? 
                        store.labelContent.split(',') : [] // 关键修改
                }));
                this.selectDistance();
            }
        })
        .catch(error => {
            
        });
},

        //点击店铺跳转
        goStoreInfo(storeId,averageStar,storeDistance){
            this.$router.push({
                path: "/StoreInformation",
                query: {
                    storeId: storeId,
                    averageStar:averageStar,
                    storeDistance:storeDistance,},
            });
        },

    }
}
</script>
<style scoped>
.distance {
    text-align: right;
    float: right;
    font-size: 16px;
    line-height: 20px;
    color: rgb(153, 153, 179);
}

/* 门店标签css */
.keyword {
    color: rgb(8, 164, 236);
    background-color: rgb(191, 231, 249);
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 16px;
}
.storeName {
    font-size: 22px;
    font-weight: 600;
    padding: 0px;
}
.address > .van-cell__value--alone {
    font-size: 16px;
    color: rgb(153, 153, 179);
}
.address {
    padding: 0px;
}
#storeMsg{
    margin-top: 10px;
    border-top: 1px solid #EEEEEE;
    padding-bottom: 15px;
    border-bottom: 1px solid #EEEEEE;
}
.interval {
    margin-top: 5px;
}
</style>